<template>
  <!-- 该组件仅针对单一系列形成的柱状图 -->
    <div class="barBG"
         ref="mychart">
    </div>
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    barDate: {
      type: Object,
      default () {
        return {
          barSeriesName: [], // 系列名称
          barDateArray: [], // 系列数据
          barDateName: [], // 系列数据x轴名称（x轴的选项）
          barColorArray: [] // 数据渐变色
        }
      }
    }
  },
  data () {
    return {
      myChart: {},
      option: {
        // 坐标轴相关设置
        grid: {
          left: '20%',
          height: 184,
          width: 180,
          bottom: 28
        },
        // 图例组件
        legend: {
          data: [], // 对应series中对象的name属性，自动生成图例组件
          right: 0, // 设置图例的位置，上下左右，
          bottom: 215,
          itemWidth: 10, // 图例图形长
          itemHeight: 10, // 图例图形高
          // 图例样式
          textStyle: {
            color: '#939daa', // 图例文字颜色
            fontSize: 10
          },
          selectedMode: false // 控制是否可以通过点击图例改变系列的显示状态
        },
        // 显示提示
        tooltip: {
          trigger: 'axis', // 触发方式
          axisPointer: {
            type: 'cross'
          },
          show: false // 是否显示提示
        },
        // x轴设置
        xAxis: {
          type: 'category', // 样式类型
          // data: ['已缴纳', '未缴纳', '逾期'], // x轴的选项名称
          // 坐标轴刻度相关设置
          axisTick: {
            show: false, // 刻度是否显示
            // 刻度样式
            lineStyle: {
              color: '#fff'
            },
            alignWithLabel: true
          },
          // x轴线相关配置
          axisLine: {
            show: false // x轴线是否显示
          },
          // 刻度标签的相关设置
          axisLabel: {
            interval: 0,
            show: true,
            textStyle: {
              color: '#939daa', // x轴文字颜色设置
              fontSize: 10
            }
          },
          nameGap: 6,
          nameTextStyle: {
            color: '##FD4041'
          }
        },
        // y轴设置
        yAxis: {
          max: 'dataMax', // 坐标轴刻度最大值
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#939daa', // y轴文字颜色设置
              fontSize: 10
            }
          },
          splitLine: { show: false } // 去除网格线
        },
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 16, // 宽度大小
            barMaxWidth: 168,
            barCategoryGap: '46', // 同系列柱间距离
            itemStyle: {
              // 常态样式
              normal: {
                // 渐变色生成器：五个参数，前4个参数依次对应右/下/左/上四个方位，0 0 0 1则代表渐变色从正上方开始；第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#FD4041' },
                  { offset: 1, color: '#F5E793' }
                ]),
                borderColor: '#999',
                borderWidth: 2, // 设置描边宽度
                borderType: 'solid', // 设置描边类型
                barBorderRadius: 10 // 统一设置四个角的圆角大小
              }
            },
            data: [] // 数据来源
          }
        ],
        // 数据加载时长
        animationDuration: function (idx) {
          return 3000
          // 越往后的数据延迟越大
          // return idx * 1000
        }
      },
      refreshBarSetInterval: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 将父组件传递值赋值给对应的数据
      this.option.legend.data = this.barDate.barSeriesName
      this.option.series[0].name = this.barDate.barSeriesName[0]
      this.option.xAxis.data = this.barDate.barDateName
      this.option.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: this.barDate.barColorArray[0] },
        { offset: 1, color: this.barDate.barColorArray[1] }
      ])
      this.option.series[0].data = this.barDate.barDateArray

      this.setEchart()
      this.refreshBar()
    })
  },
  methods: {
    // 创建实例并生成表格
    setEchart () {
      this.myChart = echarts.init(this.$refs.mychart) // 创建实例
      this.myChart.setOption(this.option) // 生成图表
    },
    // 隔10秒刷新表格
    refreshBar () {
      this.refreshBarSetInterval = setInterval(() => {
        this.setEchart()
      }, 10000)
    }
  },
  destroyed () {
    clearInterval(this.refreshBarSetInterval)
  }
}
</script>

<style  lang="scss" scoped>
.barBG {
  width: 220px;
  height: 246px; // 不带标题和副标题高度
  // height: 274px;带标题
  // background-color: #051930;
}
</style>
